<html>
    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
    table.imagetable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
    }
    table.imagetable th {
        background:#b5cfd2 url('cell-blue.jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    table.imagetable td {
        background:#dcddc0 url('cell-grey.jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
    </style>
    <div id="app">
        <div>
            <button class="button">第一次读取所有app状态</button>
        </div>
        <!--
        <div>
            <button class="button">第一次读取所有app状态</button>
        </div>
        <div>
            <button class="button">第一次读取所有app状态</button>
        </div>
        <div>
            <button class="button">第一次读取所有app状态</button>
        </div>
        
        <div>
            <button class="button">第一次读取所有app状态</button>
        </div>
        -->
        <div>
            <input type="text" v-model="video_path"/>
            <button class="button" v-on:click="changeVideo">执行转码</button>
        </div>
            
        
        <!-- Table goes in the document BODY -->
        <table class="imagetable">
            <template v-for="(d,key,index) in devices">
                <tr>
                    <th>device_id</th><th>name</th><th>有多少包</th><th>当前执行任务</th>
                </tr>
                <tr>
                    <td>{{d.ID}}</td><td>{{d.Name}}</td><td>{{d.Packs.length}}</td><td>{{d.CurrentTask}}</td>
                </tr>
                
                <tr>
                    <th>包名</th><th>是否登录</th><th>用户名</th><th>关注数</th><th>粉丝数</th>
                </tr>
                <tr v-for="p in d.Packs">
                    <td>{{p.Name}}</td><td>{{p.LoginStatus}}</td><td>{{p.LoginName}}</td><td>{{p.Follow}}</td><td>{{p.Fans}}</td>
                </tr>
            </template>
        </table>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.5/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        vue = new Vue({
            el: '#app',
            data: {
                devices: {},
                video_path: ""
            },
            created: function () {
                this.getDevievs()
            },
            methods: {
                getDevievs: function() {
                    $.get('/get_devices', resp => {this.devices = resp.data})
                },
                changeVideo: function() {
                    $.get('/run_videos', {dir:this.video_path}, resp => {alert("开始转码")})
                }
            }
        })
        
    </script>
</html>